<template>
	<div class="home-content" v-loading="homeLoad" element-loading-background="rgba(0, 0, 0, 0.8)">
		<div class="home-left home-width">
			<sub-nav title="当前交通运行情况" />
			<current-run class="mb2"></current-run>
			<sub-nav title="辖区拥堵道路TOP10" />
			<congested-roads ref="congestedRef" />
		</div>
		<div class="home-con">
			<map-page @handle-maps="handleMaps" />
			<sub-nav title="道路建设情况" />
			<div class="flooer-chart">
				<flooer-chart />
			</div>
		</div>
		<div class="home-right home-width">
			<sub-nav title="各等级道路建设统计" />
			<roads-length ref="lengthRef" class="item-bg mb2" />

			<!-- <sub-nav title="不同等级道路完成率(%)" /> -->
			<!-- <completion-rate ref="completionRef" class="mb2" /> -->

			<sub-nav title="中心城区现状路网统计" videoSrc="2" />
			<congestion-charts ref="development" class="item-bg mb2" style="padding-left: 0; height: 33vh" />

			<!-- <sub-nav title="当日天气" videoSrc="2" />
      <div class="setbg item-bg" style="height: 25vh">
        <average-velocity ref="velocityRef" />
      </div> -->
		</div>
		<video src="@/assets/images/home/bg.mp4" loop autoplay="autoplay" muted></video>
		<div class="containerBg">

		</div>
		<!-- <img src="@/assets/images/home/container-bg.png" alt="" /> -->
	</div>
</template>
<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		onMounted,
		nextTick
	} from 'vue';
	import subNav from './components/subNav.vue';
	// 拥堵指数
	import congestionCharts from './components/congestionCharts.vue';
	// 平均速度TOP5
	import congestedRoads from './components/congestedRoads.vue';
	// 3D地图下钻
	import mapPage from './components/mapPage.vue';
	// 右侧 - views
	import roadsLength from './rightComponents/roadsLength.vue';
	// import completionRate from './rightComponents/completionRate.vue';
	import averageVelocity from './rightComponents/averageVelocity.vue';
	// 道路交通运行情况
	import currentRun from './components/currentRun';
	// 道路建设情况
	import flooerChart from './components/flooerChart'
	import {
		getIndexInfo,getIndexInfo1
	} from '@/api/home';

	export default defineComponent({
		components: {
			subNav,
			congestionCharts,
			congestedRoads,
			mapPage,
			roadsLength,
			currentRun,
			flooerChart,
			// completionRate,
			averageVelocity,
		},
		setup() {
			const state = reactive({
				velocityRef: null,
				completionRef: null,
				congestedRef: null,
				development: null,
				lengthRef: null,
				indexInfo: {},
				roadNetlength: '0',
				density: '0',
				mapCode: '9317',
				homeLoad: true,
			});
			const getInfo = () => {
				state.homeLoad = true;
				getIndexInfo({
					nodeId: state.mapCode
				}).then((res) => {
					state.homeLoad = false;
					state.indexInfo = res;
					const {
						roadNet,
						hotAreaCongestRank,
						levelRoadLength,
						levelFinishedRatio,
						avgSpeed,
						levelRoadCount,
					} = res;
					state.roadNetlength = parseFloat(roadNet.length / 1000).toFixed(2);
					state.density = parseFloat(roadNet.density / 1000).toFixed(2);
					state.lengthRef.setData(); //levelRoadLength, state.mapCode
					// state.completionRef.setData();
					// state.velocityRef.setData(avgSpeed);
					state.development.setData();
				});
				state.congestedRef.setData(state.mapCode);

        getIndexInfo1({

        }).then((res) => {
          if(res&&res[0].status==1){

          }else{
            window.localStorage.clear();
            window.location.reload();
          }
        });
			};
			const handleMaps = (code) => {
				if (state.mapCode === code) return;
				state.mapCode = code;
				getInfo();
			};
			onMounted(() => {
				getInfo();
			});
			return {
				...toRefs(state),
				handleMaps,
			};
		},
	});
</script>
<style lang="less" scoped>
	.home-content {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 3;
		padding: 1vw 2.583vw 1vw 2.383vw;
		// background: url('@/assets/images/home/container-bg.png') no-repeat;
		background-size: 100% 110%;
		display: flex;
		align-items: center;
		color: #fff;
		justify-content: space-between;

		.home-width {
			width: 24%;
			height: 100%;
		}

		.home-con {
			width: 50%;
			height: 100%;
			margin: 0 1%;
		}
	}

	img {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
	}

	.containerBg {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		background: url('@/assets/images/home/container-bg.png') no-repeat;
		background-size: 100% 100%;
	}

	video {
		width: 100vw;
		height: 100vh;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		object-fit: fill;
	}

	.item-bg {
		width: 100%;
		padding: 0.8vw;

		// background: linear-gradient(0deg, #0A182F 0%, rgba(0,0,0,0.1) 100%);
		.left-item-bg {
			flex: 0 48%;
			padding: 0.9vw;
			background: url(@/assets/images/home/length_bg.png) no-repeat;
			background-size: 100% 100%;

			img {
				margin-right: 0.8vw;
				flex-shrink: 0;
				flex-grow: 0;
			}

			span {
				color: #cedcf2;
				font-size: 0.3vw;
				margin-bottom: 1vw;
			}

			p {
				color: #fff;
				font-size: 0.8vw;

				i {
					color: #76b6f1;
					font-style: normal;
					font-size: 0.3vw;
				}
			}
		}
	}

	.home-left,
	.home-con,
	.home-right {
		position: relative;
		z-index: 2;
	}

	.setbg {
		background: url('@/assets/images/home/case-2.png') no-repeat;
		background-size: 100% 100%;
		margin-top: -8px;
	}

	.flooer-chart {}
</style>
